import React from "react";
import useRemove from "./useRemove";
import useAdd from "./useAdd";

const App = () => {
  const [list, set_list, remove] = useRemove();
  const [textValue, handleChange, handleClick] = useAdd(set_list);

  return (
    <div>
      <h3>自定义hooks</h3>

      <input type="text" value={textValue} onChange={handleChange} />
      <button onClick={handleClick}>btn</button>

      <ul>
        {list.map((item) => (
          <li key={item.id}>
            {item.name} - <button onClick={() => remove(item.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;
